<template>
	<div class="center">
		<div class="page-market">
			<el-row >
				<el-card :body-style="{ padding: '0px' }" v-for="(o, i) in arr" :key="i">
					<div class="media-wrap">
						<!-- <img src="../assets/星河鲸梦.jpg"  /> -->
						<!-- <el-image :src="`http://localhost:8080/${o.cimg}`" :class="'image'"/> -->
					</div>
					<div style="margin: 0 24px; padding: 24px 0; position: relative;">
						<span class="text">
							{{o.cname}}
						</span>
						<span class="flag"></span>
						<div style="height:20px;"></div>
						<div class="card-num">
							<span>#{{o.cid}}/</span>
							{{o.releasenum}}
						</div>
						<div class="action-bar">
							<el-button  plain style="margin-left: 180px; " @click="detail(i)">￥{{o.price}}</el-button>
						</div>
					</div>
				</el-card>
			</el-row>
		</div>
	</div>
</template>

<script>


export default {
	name: 'Market',

	data() {
		return {
			//marketCollection
			arr: [],
			user:''
		};
	},

	mounted() {
		const that = this;
		
		that.user = that.getToken();
			console.log(that.user);
			if (that.user != null) {
			this.$http.get("MarketServlet/queryAll?user=" + that.user)
				.then((response) => {
					this.arr = response.data;
					console.log(this.arr);
					// this.arr.sort((a,b)=>{return Date.parse(b.startdate) - Date.parse(a.startdate);})
				})
		}
		else {
			this.$http.get("MarketServlet/queryAll?user=''")
				.then((response) => {
					this.arr = response.data;
					console.log(this.arr);
					// this.arr.sort((a,b)=>{return Date.parse(b.startdate) - Date.parse(a.startdate);})
				})
		}
	},

	methods: {
		getToken() {
			return sessionStorage.getItem('token');
		},
		sortByPublish(a, b) {
			return Date.parse(b.startdate) - Date.parse(a.startdate);
		},
		detail(i) {
			var elem = this.arr[i]
			console.log(elem);
            this.$router.push({
                            name:'marketdetail', 
                            query:{id:elem.id},                  
                        });   
        }
	},
};
</script>

<style lang="css" scoped>
.page-market {
	padding: 30px 0;
}

.action-bar {
	position: absolute;
	right: 0;
	bottom: 24px;
	display: inline-block;
}

.card-num {
	margin-top: 4px;
	line-height: 18px;
	height: 18px;
	color: #87888e;
	font-size: 14px;
}

span.text {
	font-size: 20px;
	line-height: 24px;
	height: 24px;
	overflow: hidden;
	max-width: -webkit-calc(100% - 36px);
	max-width: -moz-calc(100% - 36px);
	max-width: calc(100% - 36px);
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.card-num span {
	color: #0066ed;
}

.button-pur {
	box-sizing: border-box;
	width: 90px;
	border: 1.5px solid #2c2c34;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	color: #2c2c34;
	font-family: sans-serif;
	line-height: 37px;
	font-size: 18px;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	word-break: break-all;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.media-wrap {
	width: 277px;
	height: 266px;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
}
.el-card{
	margin: 20px 10px;
}
</style>